<!DOCTYPE html>
<html lang="zh">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
	<meta name="author" content="yinq">
	<title>登录 - 后台管理系统模板</title>
	<link rel="shortcut icon" type="image/x-icon" href="admin/images/favicon.ico">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
	<link rel="stylesheet" type="text/css" href="component/materialDesign/css/materialdesignicons.min.css">
	<link rel="stylesheet" type="text/css" href="component/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="admin/css/loading.css">
	<link rel="stylesheet" type="text/css" href="admin/css/style.css">
	<style>
		.signin-form .has-feedback {
			position: relative;
		}

		.signin-form .has-feedback .form-control {
			padding-left: 36px;
		}

		.signin-form .has-feedback .mdi {
			position: absolute;
			top: 0;
			left: 0;
			right: auto;
			width: 36px;
			height: 36px;
			line-height: 36px;
			z-index: 4;
			color: #dcdcdc;
			display: block;
			text-align: center;
			pointer-events: none;
		}

		.signin-form .has-feedback.row .mdi {
			left: 15px;
		}
	</style>
</head>

<body class="center-vh" style="background-image: url(admin/images/login-bg.jpg); background-size: cover;">
	<div class="card card-shadowed p-5 mb-0 mx-2" style="width: 500px;">
		<div class="text-center mb-3">
			<h4>后台管理系统模板</h4>
		</div>

		<form class="signin-form needs-validation" novalidate id="loginForm">
			<div class="mb-3 has-feedback">
				<span class="mdi mdi-account" aria-hidden="true"></span>
				<input type="text" class="form-control" name="username" placeholder="用户名" required>
			</div>

			<div class="mb-3 has-feedback">
				<span class="mdi mdi-lock" aria-hidden="true"></span>
				<input type="password" class="form-control" name="password" placeholder="密码" required>
			</div>

			<div class="mb-3 has-feedback row">
				<div class="col-7">
					<span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
					<input type="text" name="captchaCode" class="form-control" placeholder="验证码" required>
				</div>
				<div class="col-5 text-right">
					<img class="pull-right" id="verificationImg" style="cursor: pointer;" title="点击刷新" alt="captcha">
				</div>
				<input name="captchaKey" hidden>
			</div>

			<div class="mb-3">
				<div class="form-check">
					<input type="checkbox" class="form-check-input" id="loginCheck">
					<label class="form-check-label not-user-select" for="rememberme">记住我</label>
				</div>
			</div>

			<div class="mb-3 d-grid">
				<button class="btn btn-primary" type="submit">立即登录</button>
			</div>
		</form>
	</div>

	<script type="text/javascript" src="component/jquery/jquery-3.7.1.min.js"></script>
	<script type="text/javascript" src="component/jquery-cookie/jquery.cookie.min.js"></script>
	<script type="text/javascript" src="component/jquery-validation/jquery.validate.min.js"></script>
	<script type="text/javascript" src="component/jquery-validation/localization/messages_zh.min.js"></script>
	<script type="text/javascript" src="component/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script type="text/javascript" src="component/util/base64.js"></script>
	<script type="text/javascript" src="admin/js/start.js"></script>
	<script type="module">
		import admin from "/admin/js/admin.js"
		var request = admin.getModule("request");
		var button = admin.getModule("button");
		var form = admin.getModule("form");

		initLoginForm();
		freshCaptcha();
		$("#verificationImg").click(freshCaptcha);
		$("#loginForm").submit(login)

		//刷新验证码
		function freshCaptcha() {
			request.post("public/getCaptcha").then(res => {
				$("[name='captchaKey']").val(res.data.captchaKey)
				$("#verificationImg").prop("src", res.data.captchaImg)
			})
		}

		/**
		* 登录
		*/
		function login() {
			var btn = button.load({
				elem: '[type="submit"]',
			})
			if (!form.validate("#loginForm")) {
				btn.stop();
				return false;
			}
			var data = form.val("#loginForm")
			localStorage.setItem("loginCheck", $("#loginCheck").prop("checked"));
			if ($("#loginCheck").prop("checked")) {
				let password = Base64.encode(data.password) // base64加密
				setCookie(data.username, password, 7)
			} else {
				setCookie('', '', -1)
			}
			request.postAlert("user/login", data).then((res) => {
				sessionStorage.clear();
				sessionStorage.setItem('token', res.data.token);
				sessionStorage.setItem("userInfo", JSON.stringify(res.data));
				location.href = "./index.html"
			}).catch(() => {
				freshCaptcha();
				btn.stop();
			})
			return false;
		}

		function setCookie(userId, password, days) {
			let date = new Date() // 获取时间
			date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days) // 保存的天数
			// 字符串拼接cookie
			window.document.cookie =
				'userId' + '=' + userId + ';path=/;expires=' + date.toGMTString()
			window.document.cookie =
				'password' + '=' + password + ';path=/;expires=' + date.toGMTString()
		}

		// 读取cookie 将用户名和密码回显到input框中
		function getCookie() {
			var loginForm = {};
			if (document.cookie.length > 0) {
				let arr = document.cookie.split('; ') //分割成一个个独立的“key=value”的形式
				for (let i = 0; i < arr.length; i++) {
					let arr2 = arr[i].split('=') // 再次切割，arr2[0]为key值，arr2[1]为对应的value
					if (arr2[0] === 'userId') {
						loginForm.username = arr2[1]
					} else if (arr2[0] === 'password') {
						loginForm.password = Base64.decode(arr2[1]) // base64解密
					}
				}
				return loginForm;
			}
		}

		function initLoginForm() {
			let loginCheck = localStorage.getItem("loginCheck")
			if (loginCheck == "true") {
				$("#loginCheck").prop("checked", true)
				var loginForm = getCookie()
				form.val("#loginForm", loginForm)
			}
		}
	</script>
</body>

</html>